<template>
  <div>
    <Header />
    <a-row style="margin-top: 55px">
      <a-col class="article_content" :lg="{ span: 15, offset: 2 }">
        <a-card class="article_innner">
          <!-- 主要卡片内容区 -->
          <router-view />
        </a-card>
      </a-col>
      <!-- 侧边栏 -->
      <a-col
        class="aside_content"
        :lg="{ span: 6, offset: 2 }"
        :xs="{ span: 0 }"
        style="margin-left: 10px"
      >
        <aside class="aside" style="width: 100% !important">
          <section class="aside__item author">
            <img
              width="100%"
              height="120"
              class="image ls-is-cached lazyloaded"
              src="../../../assets/newstyle.gif"
            />
            <div class="user">
              <img
                width="75"
                height="75"
                class="avatar ls-is-cached lazyloaded"
                :src="config.icon_src"
                alt="博主头像"
              />
              <span class="link">{{ config.author }}</span>
              <p class="motto motto">{{ config.word }}</p>
            </div>
            <div class="count">
              <div class="item" title="累计文章数">
                <span class="num">{{ count.article }}</span>
                <span>文章数</span>
              </div>
              <div class="item" title="累计评论数">
                <span class="num">{{ count.comment }}</span>
                <span>评论量</span>
              </div>
            </div>
          </section>

          <section class="aside__item timelife">
            <div class="aside__item-title">
              <svg
                class="icon"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
              >
                <path
                  d="M864.801 895.471h-33.56v-96.859c0-126.081-73.017-235.093-179.062-287.102 106.046-52.01 179.062-161.022 179.062-287.102v-96.859h33.56c17.301 0 31.325-14.327 31.325-32 0-17.673-14.024-32-31.325-32H159.018c-17.3 0-31.325 14.327-31.325 32 0 17.673 14.025 32 31.325 32h33.02v96.859c0 126.08 73.016 235.092 179.061 287.102-106.046 52.009-179.062 161.02-179.062 287.101v96.859h-33.02c-17.3 0-31.325 14.326-31.325 32s14.025 32 31.325 32H864.8c17.301 0 31.325-14.326 31.325-32s-14.023-31.999-31.324-31.999zM256.05 222.427v-94.878h513.046v94.878c0 141.674-114.85 256.522-256.523 256.522-141.674 0-256.523-114.848-256.523-256.522zm513.046 673.044H256.05v-94.879c0-141.674 114.849-256.521 256.523-256.521 141.673 0 256.523 114.848 256.523 256.521v94.879z"
                ></path>
                <path
                  d="M544.141 384c0-17.69-14.341-32.031-32.031-32.031-71.694 0-127.854-56.161-127.854-127.855 0-17.69-14.341-32.032-32.031-32.032s-32.032 14.341-32.032 32.032c0 107.617 84.3 191.918 191.917 191.918 17.69 0 32.031-14.342 32.031-32.032z"
                ></path>
              </svg>
              <span class="text">倒计时</span>
              <span class="line"></span>
            </div>
            <div class="aside__item-contain">
              <div class="item">
                <div class="title">
                  今日已经过去
                  <span class="text">{{ moment.day.pass }}</span>
                  小时
                </div>
                <div class="progress">
                  <a-progress
                    :stroke-color="{
                      '0%': '#87d068',
                      '100%': '#87d068',
                    }"
                    :percent="moment.day.progress"
                    size="small"
                    status="active"
                  />
                </div>
              </div>
              <div class="item">
                <div class="title">
                  这周已经过去
                  <span class="text">{{ moment.week.pass }}</span>
                  天
                </div>
                <div class="progress">
                  <a-progress
                    :stroke-color="{
                      '0%': '#445068',
                      '100%': '#445068',
                    }"
                    :percent="moment.week.progress"
                    size="small"
                    status="active"
                  />
                </div>
              </div>
              <div class="item">
                <div class="title">
                  本月已经过去
                  <span class="text">{{ moment.month.pass }}</span>
                  天
                </div>
                <div class="progress">
                  <a-progress
                    :stroke-color="{
                      '0%': 'red',
                      '100%': 'red',
                    }"
                    :percent="moment.month.progress"
                    size="small"
                    status="active"
                  />
                </div>
              </div>
              <div class="item">
                <div class="title">
                  今年已经过去
                  <span class="text">{{ moment.year.pass }}</span>
                  个月
                </div>
                <div class="progress">
                  <a-progress
                    :percent="moment.year.progress"
                    size="small"
                    status="active"
                  />
                </div>
              </div>
            </div>
          </section>

          <section class="aside__item hot" style="top: 120px">
            <div class="aside__item-title">
              <svg
                class="icon"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
              >
                <path
                  d="M512 938.667A426.667 426.667 0 0 1 85.333 512a421.12 421.12 0 0 1 131.2-306.133 58.88 58.88 0 0 1 42.667-16.64c33.28 1.066 58.027 28.16 84.267 56.96 7.893 8.533 19.626 21.333 28.373 29.013a542.933 542.933 0 0 0 24.533-61.867c18.134-52.266 35.414-101.76 75.307-121.6 55.04-27.733 111.573 37.974 183.253 121.6 16.214 18.774 38.614 44.8 53.547 59.52 1.707-4.48 3.2-8.96 4.48-12.373 8.533-24.32 18.987-54.613 51.2-61.653a57.813 57.813 0 0 1 55.68 20.053A426.667 426.667 0 0 1 512 938.667zM260.693 282.453A336.64 336.64 0 0 0 170.667 512a341.333 341.333 0 1 0 614.826-203.733 90.24 90.24 0 0 1-42.666 50.56 68.267 68.267 0 0 1-53.547 1.706c-25.6-9.173-51.627-38.4-99.2-93.226a826.667 826.667 0 0 0-87.253-91.734 507.733 507.733 0 0 0-26.24 64c-18.134 52.267-35.414 101.76-75.947 119.254-48.853 21.333-88.32-21.334-120.107-56.96-5.76-4.694-13.226-13.014-19.84-19.414z"
                ></path>
                <path
                  d="M512 810.667A298.667 298.667 0 0 1 213.333 512a42.667 42.667 0 0 1 85.334 0A213.333 213.333 0 0 0 512 725.333a42.667 42.667 0 0 1 0 85.334z"
                ></path>
              </svg>
              <span class="text">热门文章</span>
              <span class="line"></span>
            </div>
            <ol class="aside__item-contain">
              <li
                class="item"
                v-for="(item, idx) in hotarticles"
                :key="item.id"
              >
                <router-link
                  class="link"
                  :to="{
                    name: 'article',
                    params: {
                      id: item.id,
                    },
                  }"
                >
                  <i class="sort">{{ idx + 1 }}</i>
                  <img
                    width="100%"
                    height="130"
                    class="image ls-is-cached lazyloaded"
                    :src="
                      'https://api.yimian.xyz/img?type=imgbed&id=' + item.id
                    "
                    :alt="item.title"
                  />
                  <div class="describe">
                    <h6>{{ item.title }}</h6>
                    <span
                      >{{ item.temperature }} 阅读 -
                      {{ item.time.substring(5, 10) }}</span
                    >
                  </div>
                </router-link>
              </li>
            </ol>
          </section>
        </aside>
      </a-col>
    </a-row>
    <Footer />
    <a-back-top :visibilityHeight="150" class="top">
      <a-icon type="arrow-up" />
    </a-back-top>
    <a-col :lg="{ span: 0 }" :xs="{ span: 24 }">
      <div class="set" @click="set">
        <a-icon type="appstore" />
      </div>
    </a-col>
    <a-col :lg="{ span: 0 }" :xs="{ span: 24 }">
      <a-drawer
        title="Basic Drawer"
        :placement="'left'"
        :visible="visible"
        @close="onClose"
      >
        <div class="header__slideout active" style="background-color: #f2f6fc">
          <img
            width="100%"
            height="150"
            class="header__slideout-image"
            src="../../../assets/newstyle.gif"
            alt="侧边栏壁纸"
          />
          <div class="header__slideout-author">
            <img
              width="50"
              height="50"
              class="avatar ls-is-cached lazyloaded"
              :src="config.icon_src"
              alt="博主头像"
            />
            <div class="info">
              <span class="link">{{ config.author }}</span>
              <p class="motto motto">{{ config.word }}</p>
            </div>
          </div>
          <ul class="header__slideout-count">
            <li class="item">
              <svg
                class="icon"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                width="15"
                height="15"
              >
                <path
                  d="M606.227 985.923H164.75c-69.715 0-126.404-56.722-126.404-126.442V126.477C38.346 56.755 95.04 0 164.75 0h619.275c69.715 0 126.549 56.755 126.549 126.477v503.925c0 18.216-14.814 32.997-33.07 32.997-18.183 0-32.925-14.78-32.925-32.997V126.477c0-33.355-27.2-60.488-60.554-60.488H164.75c-33.353 0-60.41 27.133-60.41 60.488v733.004c0 33.353 27.057 60.441 60.41 60.441h441.477c18.183 0 32.925 14.787 32.925 33.004 0 18.211-14.742 32.997-32.925 32.997zm0 0"
                ></path>
                <path
                  d="M657.62 322.056H291.154c-18.183 0-32.924-14.786-32.924-33.003 0-18.21 14.74-32.998 32.924-32.998H657.62c18.256 0 33.07 14.787 33.07 32.998 0 18.217-14.814 33.003-33.07 33.003zm0 0M657.62 504.749H291.154c-18.183 0-32.924-14.78-32.924-32.993 0-18.222 14.74-32.997 32.924-32.997H657.62c18.256 0 33.07 14.775 33.07 32.997 0 18.218-14.814 32.993-33.07 32.993zm0 0M445.611 687.486H291.154c-18.183 0-32.924-14.78-32.924-33.004 0-18.21 14.74-32.991 32.924-32.991h154.457c18.184 0 32.998 14.78 32.998 32.991 0 18.224-14.814 33.004-32.998 33.004zm0 0M866.482 1024c-8.447 0-16.896-3.225-23.34-9.662L577.595 748.786c-7.156-7.123-10.592-17.07-9.446-27.056l8.733-77.728c1.788-15.321 13.885-27.378 29.2-29.06l77.45-8.52c10.443-.965 19.9 2.433 26.905 9.449l265.558 265.551c12.875 12.877 12.875 33.784 0 46.666l-86.184 86.25c-6.438 6.437-14.887 9.662-23.33 9.662zm-231.05-310.646l231.05 231.018 39.575-39.62-231.043-231.05-35.505 3.938-4.076 35.714zm0 0"
                ></path>
              </svg>
              <span
                >累计撰写 <strong>{{ count.article }}</strong> 篇文章</span
              >
            </li>
            <li class="item">
              <svg
                class="icon"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                width="15"
                height="15"
              >
                <path
                  d="M921.6 153.6H102.4A102.4 102.4 0 0 0 0 256v512a102.4 102.4 0 0 0 102.4 102.4h819.2A102.4 102.4 0 0 0 1024 768V256a102.4 102.4 0 0 0-102.4-102.4zM687.616 473.088L972.8 258.304V791.04zM960 204.8L527.104 527.36 73.216 204.8zM371.2 483.584l-320 287.232V256zM73.984 819.2l339.2-307.2 83.456 59.392a51.2 51.2 0 0 0 60.416 0l89.6-67.328L931.072 819.2z"
                ></path>
              </svg>
              <span
                >累计收到 <strong>{{ count.comment }}</strong> 条评论</span
              >
            </li>
          </ul>
          <ul class="header__slideout-count">
            <div class="type">
              <h4>
                <a-space><a-icon type="cloud" /><span>分类</span></a-space>
              </h4>
              <p
                class="item"
                style="cursor: pointer"
                :title="item"
                v-for="(item, idx) in category"
                :key="idx"
                @click="search(item[1])"
              >
                {{ item[1] }}
              </p>
            </div>
          </ul>
          <div class="header__below-sign">
            <div class="item">
              <svg
                class="icon"
                viewBox="0 0 1024 1024"
                xmlns="http://www.w3.org/2000/svg"
                width="15"
                height="15"
              >
                <path
                  d="M710.698 299a213.572 213.572 0 1 0-213.572 213.954A213.572 213.572 0 0 0 710.698 299zm85.429 0a299.382 299.382 0 1 1-299-299 299 299 0 0 1 299 299z"
                ></path>
                <path
                  d="M114.223 1024a46.91 46.91 0 0 1-46.91-46.91 465.281 465.281 0 0 1 468.332-460.704 475.197 475.197 0 0 1 228.827 58.35 46.91 46.91 0 1 1-45.384 82.378 381.378 381.378 0 0 0-183.443-46.909 371.08 371.08 0 0 0-374.131 366.886A47.29 47.29 0 0 1 114.223 1024zM944.483 755.129a38.138 38.138 0 0 0-58.733 0l-146.449 152.55-92.675-91.53a38.138 38.138 0 0 0-58.732 0 43.858 43.858 0 0 0 0 61.402l117.083 122.422a14.492 14.492 0 0 0 8.39 4.577c4.196 0 4.196 4.195 8.39 4.195h32.037c4.195 0 4.195-4.195 8.39-4.195s4.195-4.577 8.39-4.577L946.39 816.15a48.054 48.054 0 0 0-1.906-61.02z"
                ></path>
                <path
                  d="M763.328 776.104L730.53 744.45a79.708 79.708 0 0 0 32.798 31.654"
                ></path>
              </svg>
              <span v-show="!isLogin" @click="changePath({ key: 'login' })"
                >未登录</span
              >
              <a-popconfirm
                title="确认退出账号吗?"
                ok-text="确认"
                cancel-text="取消"
                placement="bottom"
                v-show="isLogin"
                @confirm="quit()"
                class="pop-box"
              >
                {{ info.username }}
              </a-popconfirm>
            </div>
          </div>
        </div>
      </a-drawer>
    </a-col>
  </div>
</template>

<script>
import Header from "@/components/client/Header.vue";
import Footer from "@/components/client/Footer.vue";
import moment from "moment";
export default {
  name: "HomeView",
  mounted() {
    if (localStorage.getItem("userData")) {
      this.isLogin = true;
      this.info = JSON.parse(localStorage.getItem("userData"));
    }
    this.$bus.$on("setUserInfo", (info) => {
      this.info = info;
      this.isLogin = true;
      localStorage.setItem("userData", JSON.stringify(info));
    });
    // 获取分类列表
    this.getCategory();
    // 获取热点文章
    this.getHotArticle();
    // 获取统计信息
    this.getCount();
    // 获取配置信息
    this.getConfig();
  },
  data() {
    return {
      // 倒计时
      moment: {
        day: {
          pass: parseInt(moment().format("HH")),
          progress: parseInt((moment().format("HH") / 24) * 100),
        },
        week: {
          pass: parseInt(moment().day()),
          progress: parseInt((moment().day() / 7) * 100),
        },
        month: {
          pass: parseInt(moment().format("DD")),
          progress: parseInt(
            (moment().format("DD") / moment().daysInMonth()) * 100
          ),
        },
        year: {
          pass: moment().format("MM"),
          progress: parseInt((moment().format("MM") / 12) * 100),
        },
      },
      // 热搜
      hotarticles: [],
      // 作者信息
      config: {},
      // 侧边栏
      visible: false,
      info: {},
      isLogin: false,
      category: [],
      // 统计信息
      count: {},
    };
  },
  components: { Header, Footer },
  methods: {
    set() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    // 控制跳转指定路由
    changePath({ key }) {
      this.visible = false;
      this.$router.push({ name: key });
    },
    // 清空cookie 退出账号
    quit() {
      this.visible = false;
      localStorage.removeItem("userData");
      this.info = {};
      this.isLogin = false;
    },
    // 获取分类
    getCategory() {
      this.$axios
        .get("/api/category/list.php")
        .then((res) => {
          this.category = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 搜索文章
    search(keyword) {
      if (keyword.trim() === "") return this.$message.error("请输入搜索内容");
      this.$router.push({
        name: "search",
        params: {
          keyword,
        },
      });
      this.visible = false;
    },
    // 获取配置信息
    getConfig() {
      this.$axios.post("/api/util/myconfig.php").then((res) => {
        const { data } = res;
        if (data.code === 1) {
          const info = data.data[0];
          info.icon_src =
            info.icon_src != ""
              ? info.icon_src
              : require("../../../assets/icon.jpg");
          this.config = info;
        } else {
          this.$message.error("获取配置项失败");
        }
      });
    },
    // 获取统计信息
    getCount() {
      this.$axios.get("/api/util/siteInfo.php").then((res) => {
        const { data } = res;
        if (data.code === 1) {
          console.log(data);
          this.count = data.data;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 获取热点文章
    getHotArticle() {
      // 挂载全局事件总线
      this.$axios.get("/api/article/hot.php").then((res) => {
        const { data } = res;
        if (data.code === 1) {
          const hotarticles = data.data;
          // 截三个放侧边
          this.hotarticles = hotarticles.slice(0, 3);
          this.$bus.$emit("hotArticle", hotarticles);
          this.notice = res.data.notice;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
ol {
  list-style: none;
}

.ant-back-top,
.set {
  background-color: #6589ff;
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  font-size: 20px;
}
.set {
  position: fixed;
  right: 100px;
  bottom: 100px;
  background-color: #ff6f6f;
}
@media screen and (max-width: 480px) {
  .set {
    right: 20px;
  }
}
.article_innner {
  border-radius: 10px;
}
.ant-message {
  z-index: 5201314;
}

.aside {
  padding: 15px 0;
  margin-left: 15px;
}
.aside__item {
  position: relative;
  width: 250px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
  overflow: hidden;
}
.aside__item:last-child {
  position: -webkit-sticky;
  position: sticky;
  margin-bottom: 0;
  transition: top 0.35s;
}
.aside__item-title {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  font-size: 16px;
  font-weight: 500;
  height: 45px;
  line-height: 45px;
  padding: 0 15px;
  color: #303133;
}
.aside__item-title .icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  fill: #303133;
}
.aside__item-title .line {
  width: 10px;
  height: 1px;
  background: #54b5db;
  margin-left: 12px;
}
.aside__item-contain {
  position: relative;
  padding: 15px;
}
.aside__item.author {
  background: #fff;
  padding: 45px 15px 15px;
}
.aside__item.author::before {
  content: "";
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
.aside__item.author::after {
  display: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 273px;
  background: url()
    no-repeat;
  background-size: cover;
  z-index: 1;
  pointer-events: none;
}
.aside__item.author:hover::after {
  display: block;
}
.aside__item.author .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  object-fit: cover;
  z-index: 1;
}
.aside__item.author .user {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 15px;
}
.aside__item.author .user .avatar {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px;
  object-fit: cover;
  transition: transform 0.75s;
  background: #fff;
  padding: 5px;
}
.aside__item.author .user .avatar:hover {
  transform: rotate(360deg);
}
.aside__item.author .user .link {
  color: #409eff;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}
.aside__item.author .user .motto {
  color: #303133;
  text-align: center;
  word-break: break-word;
}
.aside__item.author .count {
  width: 100%;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
}
.aside__item.author .count .item {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #606266;
  font-size: 12px;
}
.aside__item.author .count .item:first-child {
  border-right: 1px solid #ebeef5;
}
.aside__item.author .count .item .num {
  max-width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 22px;
  color: #303133;
  margin-bottom: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.aside__item.author .list {
  padding-top: 15px;
}
.aside__item.author .list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 30px;
}
.aside__item.author .list .item .link {
  position: relative;
  color: #606266;
  max-width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aside__item.author .list .item .link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #409eff;
  transition: all 0.35s;
}
.aside__item.author .list .item .link:hover {
  color: #409eff;
}
.aside__item.author .list .item .link:hover::after {
  width: 100%;
}
.aside__item.author .list .item .icon {
  fill: #606266;
}
.aside__item.timelife {
  background: #fff;
}
.aside__item.timelife .item {
  margin-bottom: 15px;
}
.aside__item.timelife .item:last-child {
  margin-bottom: 0;
}
.aside__item.timelife .item .title {
  font-size: 12px;
  color: #909399;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
.aside__item.timelife .item .title .text {
  color: #409eff;
  font-weight: 500;
  font-size: 14px;
  margin: 0 5px;
}
.aside__item.hot {
  background: #fff;
}
.aside__item.hot .empty {
  text-align: center;
  color: #606266;
}
.aside__item.hot .item {
  margin-bottom: 15px;
}
.aside__item.hot .item:last-child {
  margin-bottom: 0;
}
.aside__item.hot .item:nth-child(1) .link .sort {
  background: #ff183e;
}
.aside__item.hot .item:nth-child(2) .link .sort {
  background: #ff5c38;
}
.aside__item.hot .item:nth-child(3) .link .sort {
  background: #ffb821;
}
.aside__item.hot .item .link {
  position: relative;
  display: block;
  border-radius: 4px;
  overflow: hidden;
}
.aside__item.hot .item .link:hover .image {
  transform: scale(1.2);
}
.aside__item.hot .item .link .sort {
  position: absolute;
  top: 5px;
  right: -20px;
  background: #7f7f8c;
  color: #fff;
  width: 65px;
  text-align: center;
  font-size: 12px;
  transform: rotate(45deg);
  font-weight: 500;
  z-index: 1;
  font-style: normal;
}
.aside__item.hot .item .link .image {
  width: 100%;
  height: 130px;
  object-fit: cover;
  transition: transform 0.35s;
}
.aside__item.hot .item .link .describe {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
  font-size: 12px;
  color: var(--seat);
}
.aside__item.hot .item .link .describe h6 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  line-height: 24px;
  font-size: 14px;
}

.header__slideout {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 80%;
  z-index: 1020;
  background: #fff;
  transform: translate3d(-100%, 0, 0);
  visibility: hidden;
  transition: transform 0.35s, visibility 0.35s;
  overflow-y: auto;
  padding: 100px 15px 0 15px;
}
.header__slideout::-webkit-scrollbar {
  display: none;
}
.header__slideout.active {
  visibility: visible;
  transform: translate3d(0, 0, 0);
}
.header__slideout-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  object-fit: cover;
  z-index: -1;
}
.header__slideout-author {
  display: flex;
  margin-bottom: 15px;
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
}
.header__slideout-author .avatar {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 4px;
}
.header__slideout-author .info {
  overflow: hidden;
  line-height: 25px;
}
.header__slideout-author .info .link,
.header__slideout-author .info .motto {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.header__slideout-author .info .link {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #303133;
}
.header__slideout-author .info .motto {
  font-size: 12px;
  color: #606266;
}
.header__slideout-count {
  background: #fff;
  border-radius: 8px;
  padding: 10px 15px;
  box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
  margin-bottom: 15px;
}
.header__slideout-count .item {
  display: flex;
  align-items: center;
  color: #606266;
  padding: 5px 0;
}
.header__slideout-count .item .icon {
  width: 15px;
  height: 15px;
  fill: #606266;
  margin-right: 5px;
}
.header__slideout-count .item strong {
  font-weight: 500;
  color: #409eff;
}
.header__slideout-menu {
  background: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
}
.header__slideout-menu .link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  color: #303133;
  transition: color 0.15s;
}
.header__slideout-menu .link a {
  transition: color 0.15s;
  color: #606266;
}
.header__slideout-menu .link .icon {
  width: 13px;
  height: 13px;
  fill: #909399;
  transition: transform 0.15s, fill 0.15s;
}
.header__slideout-menu .link.in {
  color: #409eff;
}
.header__slideout-menu .link.in a {
  color: #409eff;
}
.header__slideout-menu .link.in .icon {
  fill: #409eff;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.header__slideout-menu .current a {
  color: #409eff;
  font-weight: 500;
  font-size: 15px;
}
.header__slideout-menu .slides {
  display: none;
  border-left: 1px solid #ebeef5;
  padding-left: 15px;
}
.header__slideout-menu .slides .link {
  color: #606266;
}
.header__slideout-menu .slides .current {
  color: #409eff;
  font-weight: 500;
  font-size: 15px;
}
.type h4 {
  color: black;
  text-align: center;
}
.header__below-sign .item {
  text-align: right;
}
</style>
